<template>
	<view class="search-page">
		<view class="header">教师搜索</view>
<view class="search-bar">
  <view class="search-input-wrap">
    <input
      v-model="keyword"
      placeholder="搜索教师姓名"
      class="search-input"
      @confirm="searchTeacher"
      confirm-type="search"
    />
  </view>
  <button @click="searchTeacher" class="search-btn">搜索</button>
</view>
		<view class="filters">
			<picker :range="genderOptions" v-model="genderIndex" @change="searchTeacher">
				<view class="filter-item">性别筛选</view>
			</picker>
			<picker :range="degreeOptions" v-model="degreeIndex" @change="searchTeacher">
				<view class="filter-item">学历筛选</view>
			</picker>
		</view>
		<view class="teacher-list">
			<view v-for="item in filteredTeachers" :key="item.id" class="teacher-card">
				<view class="teacher-main">
					<text class="teacher-name">{{ item.name }}</text>
					<text class="teacher-degree">{{ item.gender }} | {{ item.degree }}</text>
				</view>
				<view class="teacher-id"> {{ maskId(item.idcard) }} </view>
				<view class="teacher-phone"> {{ maskPhone(item.phone) }} </view>
			</view>
			<view v-if="filteredTeachers.length === 0" class="no-result">暂无结果</view>
		</view>
	</view>
</template>

<script>
	// import uniSqlite from '@/uni_modules/uni-sqlite/js_sdk/uni-sqlite.js'
	export default {
		data() {
			return {
				keyword: '',
				genderOptions: ['全部', '男', '女'],
				genderIndex: 0,
				degreeOptions: ['全部', '本科', '硕士', '博士', '研究生'],
				degreeIndex: 0,
				teacherList: [],
				filteredTeachers: []
			}
		},
		onShow() {
			this.getTeachers()
		},
		methods: {
			getTeachers() {
				uniSqlite.selectSql({
					name: 'teacherDB',
					sql: 'SELECT * FROM teacher',
					success: (res) => {
						this.teacherList = res.data || []
						this.searchTeacher()
					}
				})
			},
			searchTeacher() {
				let list = this.teacherList
				if (this.keyword) {
					list = list.filter(t => t.name.includes(this.keyword))
				}
				if (this.genderIndex > 0) {
					const gender = this.genderOptions[this.genderIndex]
					list = list.filter(t => t.gender === gender)
				}
				if (this.degreeIndex > 0) {
					const degree = this.degreeOptions[this.degreeIndex]
					list = list.filter(t => t.degree === degree)
				}
				this.filteredTeachers = list
			},
			maskId(id) {
				if (!id) return ''
				return id.substr(0, 3) + '*********' + id.substr(-3)
			},
			maskPhone(phone) {
				if (!phone) return ''
				return phone.substr(0, 3) + '****' + phone.substr(-2)
			}
		}
	}
</script>

<style>
	.search-page {
		background: #fff;
		min-height: 100vh;
	}

	.header {
	 background-color: #c41e3a;
	 color: #fff;
	 height: 90rpx;
	 line-height: 90rpx;
     padding-left: 20rpx;
	}

.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  margin: 20rpx 20rpx 0 20rpx;
}
.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  height: 74rpx;
}
.iconfont {
  font-size: 32rpx;
  color: #c41e3a;
  margin-right: 10rpx;
}
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 28rpx;
  height: 74rpx;
  line-height: 74rpx;
}
.search-btn {
  margin-left: 20rpx;
  background: #c41e3a;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  height: 74rpx;
  line-height: 74rpx;
  padding: 0 36rpx;
  border: none;
}
	.filters {
		display: flex;
		padding: 0 20rpx 20rpx 20rpx;
	}

	.filter-item {
		margin-right: 20rpx;
		background: #fff;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
	}

	.teacher-list {
		padding: 0 20rpx;
	}

	.teacher-card {
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

	.teacher-main {
		display: flex;
		justify-content: space-between;
	}

	.teacher-name {
		font-weight: bold;
	}

	.teacher-degree {
		color: #888;
	}

	.teacher-id,
	.teacher-phone {
		color: #888;
		font-size: 24rpx;
	}

	.no-result {
		text-align: center;
		color: #aaa;
		margin-top: 40rpx;
	}
</style>